/*var add = document.querySelector('#add');
add.addEventListener('click',function () {
    var input = document.querySelector('#myInput');
    var li = document.createElement('li');
    var span = document.createElement('span');
    var span_text = document.createTextNode(myInput.value);
    span.appendChild(span_text);
    var button = document.createElement('button');
    var button_text = document.createTextNode('x');
    button.addEventListener('click',function () {
        var my = document.querySelector('#my');
        my.removeChild(this.parentNode);
    })
    button.appendChild(button_text);
    li.appendChild(span);
    li.appendChild(button);
    var my = document.querySelector('#my')
    my.appendChild(li);
})*/






//数据
let lists = ["学习 JavaScript", "学习 HTML5", "学习 CSS3"]

function d() {
	//先清空ul里面的li，然后再用for循环添加li
	document.querySelector('#ul').innerHTML = ''

	//创建一个for循环
	for(let i = 0; i < lists.length; i++) {
		//创建li标签
		let li = document.createElement('li')
		li.classList.add('list-group-item')
		li.classList.add('d-flex')
		li.classList.add('justify-content-between')
		li.classList.add('align-items-center')

		let span = document.createElement('span')
		let spanText = document.createTextNode(lists[i])
		//把文本内容，追加到创建的span标签里面
		span.appendChild(spanText)
		//console.log(span)

		//span标签可编辑
		span.addEventListener('dblclick', function() {
			console.log(this)
			this.setAttribute('contenteditable', true)
		})

		let button = document.createElement('button')
		button.type = 'bytton'
		button.classList.add('close')
		button.innerHTML = '&times;'

		//给删除按钮创建一个点击事件
		button.addEventListener('click', function() {
			console.log(i)
			//删除一条指定的数据
			lists.splice(i, 1)
			//把数组的数据展示到前台
			//把lists的数据，显示到前台
			d()
		})

		li.appendChild(span)
		li.appendChild(button)
		console.log(li)

		let ul = document.querySelector('#ul')
		ul.appendChild(li)
	}
}

d()

let ipt = document.querySelector('#ipt')
let btn = document.querySelector('#btn')
btn.addEventListener('click', function() {
	//把表单里的数据放进数组
	if(ipt.value != '') {
		lists.push(ipt.value)
	} else {
		alert("请添加事件")
	}

	//把lists数组的数据，显示到前台
	d()
})